
<template>
  <div class="common_block_div">
    <div class="">
      <div class="common_button flex_ac">
        <div class="right_button margin_a flex">
          <a href="javascript:;" class="color_blue " @click="handleUpdate"  v-if="have_auth('/system/index/add')">新增</a>
        </div>
      </div>
    </div>
    <div class="">

      <!--row-key="id" :tree-props="{children: '_child', hasChildren: 'hasChildren'}" -->
      <el-table v-loading="loading" :data="list" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="部门名称" align="left" prop="org_name"  />
        <el-table-column label="部门类型" align="center" prop="org_type_text"  />
        <el-table-column label="部门排序" align="center" prop="sort_order"  />
        <el-table-column label="状态" align="center" prop="status_text"  />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleNext(scope.row)" v-if="have_auth('/system/index/add')">添加下级</el-button>
            <el-button type="text" size="small" @click="handleUpdate(scope.row)" v-if="have_auth('/system/index/edit')">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)" v-if="have_auth('/system/index/del')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        @pagination="getList"
      /> -->
    </div>


   <!-- 添加或修改对话框 -->
   <el-dialog v-dialogDrag :close-on-click-modal="false" title="新增/编辑部门" :visible.sync="open" width="500px" append-to-body>
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
       <el-row>
         <el-col :span="24">
           <el-form-item label="上级部门" prop="parent_id">
               <el-cascader style="width:100%" v-model="form.parent_id" :options="list"
                   :props="{ expandTrigger: 'hover',checkStrictly: true,emitPath:false,value:'id',label:'org_name',children:'children'}"
                   clearable></el-cascader>
           </el-form-item>
         </el-col>

         <FormItem label="部门类型" class="" :span="24" type="select" :form="form" prop="org_type" :seleDatas="openOptions" seleKey="id" seleName="title" clearable />
         <!-- <FormItem label="上级机构" class="" :span="12" type="input" :form="form" prop="pid" clearable /> -->
         <FormItem label="部门名称" class="" :span="24" type="input" :form="form" prop="org_name" clearable />

         <FormItem label="排序" class="" :span="24" type="number" :form="form" prop="sort_order" clearable />
         <FormItem label="是否启用" class="" :span="24" type="radioss" radioyes="启用" radiono="禁用" :form="form" prop="status" clearable />
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="open=false;">取 消</el-button>
       <el-button type="primary" @click="submitForm('form')" :loading="is_ajax">{{is_ajax?'保存中···':'确定'}}</el-button>
     </div>
   </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'needCache',
  data () {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      activeName:'1',  // 1进行中 2 已结束
      loading: true,
      total: 0,
      // 定时任务表格数据
      list: [],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 99999999
      },
      openOptions: [
        {id:1,title:'部门'},
        {id:2,title:'部门'},
        {id:3,title:'科室'},
        {id:4,title:'小组'}
      ],
      open:false,
      queryParams2:{},
      open:false,
      // 表单参数
      form: {
        org_name:'',
        org_type:"",
        sort_order:0,
        status:1,
        parent_id:0
      },
      // 表单校验
      rules: {
        org_name: [
          { required: true, message: "部门名称不能为空", trigger: "blur" }
        ],
        org_type: [
          { required: true, message: "部门类型不能为空", trigger: "blur" }
        ]
      },
      is_ajax:false,
      list2:[]
    }
  },
  activated() {
    this.getList();
  },
  methods:{
    // 表单重置
    reset() {
      this.form = {
        org_name:'',
        org_type:"",
        sort_order:0,
        status:1,
        parent_id:0
      };
      if(this.$refs['form']){
        this.$refs['form'].clearValidate();
      }
    },
    /** 提交按钮 */
    submitForm: function(form) {
      const _this=this;
      this.$refs[form].validate(valid => {
        if (valid) {
          this.is_ajax=true;
          let _data={..._this[form]};
          let url="/manage/admin.Organization/save";

          _this.axios.post(url, _data).then(function(data) {
            if(data){
              _this.tip_show('操作成功','success');
              _this.open=false;
              _this.getList()
            }
            _this.is_ajax=false;
          }).catch(function(error) {
            _this.is_ajax=false
            console.log(error);
          })
        }
      });
    },
    handleNext(row){
      this.reset()
      this.form={
        org_name:'',
        org_type:"",
        sort_order:0,
        status:1,
        parent_id:row.id
      };
      this.open=true;
    },
    /** 修改按钮操作 */
    handleUpdate(row){
      this.reset()
      this.form=row.id?{...row}:{
        org_name:'',
        org_type:"",
        sort_order:0,
        status:1,
        parent_id:0
      };
      this.open=true;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const _this=this;
      const ids = row.id;
      if(ids.length==0){
        _this.$message.error('请选择要操作的数据');
        return false;}
      this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          _this.axios.post("/manage/admin.Organization/delete", {id:ids}).then((res) => {
              if (res) {
                  _this.getList();
                  _this.$message.success('操作成功');
              }
          }).catch((err) => {
              console.log(err);
          });
        })
    },
    /** 查询定时任务列表 */
    getList() {
      const _this=this;
      this.loading = true;
      _this.axios.get("/manage/admin.Organization/index", {params:this.queryParams}).then(function(res) {
        if(res){
          _this.list = res.message;
          // _this.list = _this.handleTree(res.data || [],'id','pid','_child');
          // _this.total = res.data.total;
          _this.loading = false;
          // _this.openOptions=_this.obj2arr(res.message.search.status)
        }
      }).catch(function(error) {
        console.log(error);
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams={
        page: 1,
        limit: 999999
      }
      this.handleQuery();
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title{line-height: 44px; font-size: 20px;}
</style>
